﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>职称设置</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/element-plus/dist/index.full.min.js"></script>
    <style>
        .txt_bg {
            background-color: #FFD553;
        }

        #app table tr td {
            border: 1px solid #000000;
            margin: 3px;
        }

        body {
            background-color: #FFFFCC;
        }
        .clock {
            font-size: 8vw;
            font-weight: bold;
            color: #333;
            text-align: center;
            padding: 20px;
            border-radius: 10px;
            background-color: white;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
        }

        /* 修改提示消息样式，确保居中显示 */
        .notification {
            position: fixed;
            top: 10%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 15px 20px;
            border-radius: 5px;
            color: white;
            font-weight: bold;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            z-index: 9999;
            opacity: 0;
            transition: all 0.3s ease;
            max-width: 300px;
            text-align: center;
        }

            .notification.show {
                opacity: 1;
            }

            .notification.success {
                background-color: #52c41a;
            }

            .notification.error {
                background-color: #ff4d4f;
            }
    </style>
</head>
<body>
    <div id="app">
        <!-- 添加提示消息容器 -->
        <div id="notification" class="notification"></div>

        <div>您正在做的业务是：人力资源--招聘管理--职位发布管理--职位发布登记</div>

        <form id="updateForm" method="post" action="">
            <div>
                <input type="button" value="提交" v-on:click="update"/>
                <el-button v-on:click="cancelUpdate">取消</el-button>
            </div>
            <table>
                <tr>
                    <td class="txt_bg">Ⅰ级机构</td>
                    <td width="150px">{{first_kind_name}}</td>
                    <td width="150px">Ⅱ级机构</td>
                    <td width="150px">{{second_kind_name}}</td>
                    <td width="150px">Ⅲ级机构</td>
                    <td width="150px">{{third_kind_name}}</td>

                    <td class="txt_bg" width="120px">招聘类型</td>
                    <td width="160px">
                        <el-select v-model="engage_type"
                                   placeholder="Select"
                                   size="large"
                                   style="width: 180px">
                            <el-option v-for="item in optionsZP"
                                       :key="item.value"
                                       :label="item.label"
                                       :value="item.value" />
                        </el-select>
                    </td>
                </tr>
                <tr>
                    <td class="txt_bg" width="180px">职位分类</td>
                    <td width="180px">
                        {{major_kind_name}}
                    </td>
                    <td class="txt_bg" width="150px">职位名称</td>
                    <td width="150px">
                        {{major_name}}
                    </td>
                    <td class="txt_bg" width="120px">招聘人数</td>
                    <td width="150px"><el-input v-model="human_amount" type="number"></el-input></td>
                    <td class="txt_bg" width="120px">截至日期</td>
                    <td width="180px">
                        <div class="block">
                            <input type="date" v-model="deadline" />
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="txt_bg">变更人</td>
                    <td><input type="text" value="@Context.Session.GetString("PName")" name="Register" readonly></td>
                    <td class="txt_bg">变更时间</td>
                    <td><input type="text" v-model="tm" name="RegistTime" /></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td class="txt_bg">职位描述</td>
                    <td colspan="7"><textarea rows="3" v-model="major_describe" name="MajorDescribe" cols="100"></textarea></td>
                </tr>
                <tr>
                    <td class="txt_bg">招聘要求</td>
                    <td colspan="7"><textarea rows="3" v-model="engage_required" name="EngageRequired" cols="100"></textarea></td>
                </tr>
            </table>
        </form>
    </div>
    <script>
        const { createApp, ref, onMounted, reactive } = Vue;

        const app = createApp({
          setup() {
              // 获取URL中的ID参数
              const urlParams = new URLSearchParams(window.location.search);
              const id = ref(urlParams.get('id') || '');



              const valueZP = ref('')
              const optionsZP =[
                  {
                      value:"校园招聘",
                      label:"校园招聘"
                  },
                  {
                      value:"社会招聘",
                      label:"社会招聘"
                  }
              ]

              // 页面加载时初始化
              onMounted(() => {
                  // 检查是否有提示消息并显示
                  checkAndShowNotification();

                  // 如果有ID，加载职位信息
                  if (id.value) {
                    loadJobData(id.value);
                  }
              });

              const tm = ref('')
              //当前时间
              function updateTime() {
                const now = new Date();

                // 格式化日期时间
                const year = now.getFullYear();
                const month = String(now.getMonth() + 1).padStart(2, '0');
                const day = String(now.getDate()).padStart(2, '0');
                const hours = String(now.getHours()).padStart(2, '0');
                const minutes = String(now.getMinutes()).padStart(2, '0');
                const seconds = String(now.getSeconds()).padStart(2, '0');
                tm.value = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
              }

              // 立即更新一次时间
              updateTime();
              // 每秒更新一次
              setInterval(updateTime, 1000);

              const value1 = ref('');

              // 显示提示消息的函数
              const showNotification = (message, type) => {
                  const notification = document.getElementById('notification');
                  notification.textContent = message;

                  // 设置消息类型样式
                  if (type === 'success') {
                      notification.className = 'notification show success';
                  } else {
                      notification.className = 'notification show error';
                  }

                  // 3秒后隐藏消息
                  setTimeout(() => {
                      notification.className = 'notification';
                  }, 3000);
              };
              const mre_id = ref('')
              // 检查并显示从服务器传来的提示消息
              const checkAndShowNotification = () => {
                  // 检查URL参数中是否有消息
                  const urlParams = new URLSearchParams(window.location.search);
                  const successMsg = urlParams.get('success');
                  const errorMsg = urlParams.get('error');

                  if (successMsg) {
                      showNotification(successMsg, 'success');
                  } else if (errorMsg) {
                      showNotification(errorMsg, 'error');
                  }
              };
              const tableData = ref();
              const first_kind_name = ref('');
              const second_kind_name = ref('');
              const third_kind_name = ref('');
              const engage_type = ref('');
              const major_kind_name = ref('');
              const major_name = ref('');
              const human_amount = ref('');
              const deadline = ref('');
              const major_describe = ref('');
              const engage_required = ref('');
              // 加载职位数据
              function loadJobData(jobId){
                axios.get(`/EMR_SUD/selectById_EMR?id=${jobId}`)
                  .then(res => {
                    console.log(res.data.zhi)
                    tableData.value = res.data.zhi
                    console.log(tableData.value)
                    mre_id.value = tableData.value.mre_id
                    first_kind_name.value = tableData.value.first_kind_name
                    second_kind_name.value = tableData.value.second_kind_name
                    third_kind_name.value = tableData.value.third_kind_name
                    engage_type.value = tableData.value.engage_type
                    major_kind_name.value = tableData.value.major_kind_name
                    major_name.value = tableData.value.major_name
                    human_amount.value = tableData.value.human_amount
                    deadline.value = tableData.value.deadline
                    major_describe.value = tableData.value.major_describe
                    engage_required.value = tableData.value.engage_required

                    console.log(mre_id.value+first_kind_name.value+second_kind_name.value+third_kind_name.value)

                    // 处理日期格式问题
                    if (tableData.value.deadline) {
                      // 检查是否包含时间部分
                      if (tableData.value.deadline.includes('T')) {
                        // 只取日期部分（去除时间）
                        deadline.value = tableData.value.deadline.split('T')[0];
                      } else {
                        // 如果已经是正确格式，直接使用
                        deadline.value = tableData.value.deadline;
                      }
                    }

                  })
                  .catch(err => {
                    console.error('获取职位信息失败:', err);
                    showNotification('获取职位信息失败，请稍后重试', 'error');
                  });
              };



              // 取消修改，返回列表页
              const cancelUpdate = () => {
                window.location.href = '/EMR_SUD/Index';
              };
              const cha = ref("@Context.Session.GetString("PName")")
              function update(){
                  axios.get("/EMR_SUD/Update",{
                      params:{
                      mre_id:parseInt(mre_id.value),
                      human_amount:parseInt(human_amount.value),
                      engage_type:engage_type.value,
                      deadline:deadline.value,
                      changer:cha.value,
                      change_time:tm.value,
                      major_describe:major_describe.value,
                      engage_required:engage_required.value
                      }
                      
                  })
                  .then(res=>{
                      if(res.data.zhi=="ok"){
                          ElementPlus.ElMessage.success('修改成功');
                          setTimeout(() => {
                      cancelUpdate();
                    }, 1500);
                      }
                  })
              }

              

              return {
                id,
                value1,
                showNotification,
                tm,
                valueZP,
                optionsZP,
                cancelUpdate,
                tableData,
                first_kind_name,
                second_kind_name,
                third_kind_name,
                engage_type,
                major_kind_name,
                major_name,
                human_amount,
                deadline,
                major_describe,
                engage_required,
                update
              }
          }
        });

        app.use(ElementPlus);
        app.mount('#app');
    </script>
</body>
</html>
